<template>
	<view class="page">
		<u-navbar title="我的计划" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="card-list">
			<template v-if="['week', 'month'].includes(this.$props.myPlanType)">
				<view class="card" v-for="(item, index) in cabinetDatas" :key="item">
					<h4 style="color: #747579;">{{item.Title}} 计划</h4>
					<u--textarea count maxlength="500" autoHeight v-model="item.content" placeholder="请输入计划内容" />
				</view>
			</template>
			<template v-else>
				<view class="card" v-for="(item, index) in cabinetDatas" :key="item.Title">
					<h3>{{item.Title}} 计划</h3>
					<u--textarea count maxlength="500" autoHeight v-model="item.content" placeholder="请输入计划内容" />
					<view class="row">
						<view class="select-type" @click="handleMatterTypeClick(index)">
							<view :style="{color: item.JHSLLX? '#000' : ''}">
								{{item.JHSLLX? item.JHSLLX : '计划类型' }}
							</view>
							<u-icon :name="arrowName" custom-prefix="custom-icon" color="#6f7175" size="18">
							</u-icon>
						</view>
						<u--input class="content-ipt" v-model="item.Sales" :clearable="false" type="number"
							input-align="left" placeholder="请输入计划数量" style="border:none;"
							placeholder-style="font-size:28rpx;color:#999">
						</u--input>
					</view>
				</view>
			</template>
		</view>


		<!-- 计划事项中计划类型 -->
		<u-picker cancelText="清空" :show="showMaterType" :columns="[['数量', '金额']]" @confirm="onMaterTypeConfirm"
			@cancel="handleMaterTypeCancel"></u-picker>
		<div class="footer">
			<button class="scratch-paper-btn" @click="() => handleScratchPaper()">草稿纸</button>
			<button class="next-btn" @click="() => handleSubmit()">发布</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// typeList: {
				// 	week: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
				// 	yarn: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				// 	month: []
				// },
				finalList: [],
				queryDatas: [],
				cabinetDatas: [],
				statrT: null,
				endT: null,
				arrowName: 'arrow-down', // arrow-up向上/arrow-down向下 icon
				showMaterType: false
			};
		},
		onLoad(props) {
			const {
				planType,
				startTime,
				planID
			} = props
			// this.finalList = this.typeList[myPlanType]
			this.statrT = startTime

			if (startTime) {
				this.normalDate = (startTime).replace(/-/g, '/');;
			}

			if (planType == 2) { // 周计划 2
				this.getWeekDateList();
			}
			if (planType == 3) { // 月计划 3 
				this.getMonthDateList();
			}
			if (planType == 4) { // 年计划 4
				this.getYearDateList();
			}
		},
		props: {
			myPlanType: String,
			startTime: String,
		},
		methods: {
			// 获取周计划列表
			getWeekDateList() {
				const weekName = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				const currentDate = this.normalDate ? new Date(this.normalDate) : new Date();
				const timesStamp = currentDate.getTime();
				const currenDay = currentDate.getDay();
				const dates = [];
				for (let i = 0; i < 7; i++) {
					let day = new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7));
					day = this.$common.dateFormat(day, 'ymd');
					const info = {
						subday: day,
						Sort: i + 1,
						Title: day + ' ' + weekName[i],
						content: '',
						JHSLLX: '',
						Sales: ''
					};
					dates.push(info);
				}
				this.cabinetDatas = dates;
			},
			//获取月计划列表
			getMonthDateList() {
				const _this = this
				const dates = this.normalDate ? new Date(this.normalDate) : new Date();
				const year = dates.getFullYear();
				const month = dates.getMonth() + 1;
				const day = dates.getDate();
				const weeks = _this.$common.getWeekNum(year, month);
				const yearWeekNum = _this.$common.getYearWeekCur(year, month, day);
				let weekList = [];
				for (let i = 0; i < weeks; i++) {
					const dates = _this.$common.getWeekDate(year, month, i + 1);
					console.log('dddddddd', dates)
					const start = _this.$common.dateFormat(dates.start, 'ymd');
					const end = _this.$common.dateFormat(dates.end, 'ymd');
					const info = {
						subday: `${start}`,
						Title: `${year}年第${i+yearWeekNum}周 ${start} ~ ${end}`,
						content: '',
						Sort: i + yearWeekNum,
						JHSLLX: '',
						Sales: ''
					}
					weekList.push(info);
				}
				this.cabinetDatas = weekList;
			},
			//获取年计划列表
			getYearDateList() {
				const dates = this.normalDate ? new Date(this.normalDate) : new Date();
				const year = dates.getFullYear();
				let monthList = [];
				for (let i = 0; i < 12; i++) {
					const info = {
						subday: `${year}-01-01`,
						Sort: i + 1,
						Title: `${i+1}月`,
						content: '',
						JHSLLX: '',
						Sales: ''
					}
					monthList.push(info);
				}
				this.cabinetDatas = monthList;
			},

			editPlan(params) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.$minApi.app._EditEstimatedPlan(params).then(res => {
						resolve(res.data);
					}).catch(err => {
						reject(err)
					})
				})
			},
			onMaterTypeConfirm(data) { // 计划事项中的计划类型的确认方法
				this.arrowName = 'arrow-down'
				this.cabinetDatas[this.currIndex].JHSLLX = data.value[0]
				this.showMaterType = false
				console.log(data);
			},
			handleMatterTypeClick(index) {
				this.arrowName = 'arrow-up'
				this.currIndex = index
				this.showMaterType = true
			},
			handleMaterTypeCancel() { // 计划事项中的计划类型的清除方法
				this.cabinetDatas[this.currIndex].JHSLLX = ''
				this.arrowName = 'arrow-down'
				this.showMaterType = false
			},
			handleScratchPaper() { // 保存草稿
				console.log(this.cabinetDatas);
			},
			handleSubmit() { // 发布
				console.log(this.cabinetDatas);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;

		.card-list {
			padding-bottom: 108rpx;

			.card {
				background-color: #fff;
				margin: 20rpx 30rpx;
				padding: 36rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			/deep/ .u-textarea {
				width: 100%;
				box-sizing: border-box;
				background: #f1f1f5;
				margin-top: 10rpx;
				padding: 24rpx;
				border-radius: 8rpx;
				min-height: 160rpx;
			}
		}

		.row {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			/deep/ .u-input {
				background-color: #F1F1F5;
				border-radius: 8rpx;
				padding: 10rpx 15rpx 10rpx 20rpx;
				box-sizing: border-box;
				margin: 0 5rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.select-type {
				display: flex;
				align-items: center;
				width: 240rpx;
				background: #F1F1F5;
				border-radius: 8rpx;
				padding: 0 20rpx;
				line-height: 80rpx;
				color: #999;
				margin-right: 10rpx;
			}
		}

		.footer {
			position: fixed;
			display: flex;
			align-items: center;
			width: 100%;
			height: 108rpx;
			display: flex;
			left: 0;
			bottom: 0;
			z-index: 99999;

			.next-btn,
			.scratch-paper-btn {
				flex: 1;
				line-height: 108rpx;
				height: 108rpx;
			}

			.next-btn {
				background-color: #2A8FFC;
				color: #fff;
			}

			.scratch-paper-btn {
				background-color: #fff;
				color: #2A8FFC;
			}
		}
	}
</style>